<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="codelover">
        <form action="/" @submit.prevent="filterTasksBySearch">
            <van-search v-model="searchQuery" show-action placeholder="搜索" />
        </form>
        <van-dropdown-menu>
            <template #title>
                <van-cell title="全部课程" is-link />
            </template>
            <van-dropdown-item v-model="value1" :options="option1" />
        </van-dropdown-menu>
        <div v-for="(item, index) in filterTasks" :key="index" class="task-item">
            <div class="task-info">
                <div class="task-name">{{ item.task }}</div>
                <div class="task-date">截止时间: {{ formatDate(item.dueDate) }}</div>
            </div>
            <div class="task-comp">
                <van-tag plain type="danger">完成情况：{{ item.comp }}</van-tag>
            </div>
            <div class="task-status">
                <van-tag plain type="danger">评分：{{ item.status }}</van-tag>
            </div>
            <div class="task-weight">评语: {{ item.weight }}</div>
            <van-button @click="handleVisitLink(item.link)">访问链接</van-button>
        </div>
    </div>
</template>

<script>
import { ref, computed } from "vue";
import {
    NavBar,
    Search,
    Cell,
    DropdownMenu,
    DropdownItem,
    Tag,
    Button,
} from "vant";

export default {
    components: {
        [NavBar.name]: NavBar,
        [Search.name]: Search,
        [Cell.name]: Cell,
        [DropdownMenu.name]: DropdownMenu,
        [DropdownItem.name]: DropdownItem,
        [Tag.name]: Tag,
        [Button.name]: Button,
    },
    setup() {
        const searchQuery = ref("");
        const value1 = ref("");
        const value2 = ref("");
        const option1 = [
            { text: "全部任务", value: "" },
            { text: "前端框架技术快速入门", value: "前端框架技术快速入门" },
            { text: "vue3路由", value: "vue3路由" },
            { text: "状态管理", value: "状态管理" },
            { text: "开源组件的使用与开发", value: "开源组件的使用与开发" },
            { text: "期末作业考核", value: "期末作业考核" },
        ];
        const formatDate = (dateString) => {
            const options = { year: 'numeric', month: 'long', day: 'numeric' };
            return new Date(dateString).toLocaleDateString(undefined, options);
        };
        const filterTasks = computed(() => {
            return tasks.value.filter(item => {
                const matchCourse = !value1.value || item.task === value1.value;
                const matchClass = !value2.value || item.class === value2.value;
                const matchSearch = searchQuery.value
                    ? item.task.toLowerCase().includes(searchQuery.value.toLowerCase())
                    : true;
                return matchCourse && matchClass && matchSearch;
            });
        });

        const filterTasksBySearch = () => {
        };
        const tasks = ref([
            {
                task: "前端框架技术快速入门",
                dueDate: "1",
                comp: "已完成",
                status: "9999",
                weight: "你无敌了孩子",
            },
            {
                task: "vue3路由",
                dueDate: "2",
                comp: "已完成",
                status: "95",
                weight: "功能齐全，样式优美",
            },
            {
                task: "状态管理",
                dueDate: "3",
                comp: "已完成",
                status: "45",
                weight: "没东西",
            },
            {
                task: "开源组件的使用与开发",
                dueDate: "4",
                comp: "已完成",
                status: "85",
                weight: "功能齐全，样式优美",
            },
            {
                task: "期末作业考核",
                dueDate: "5",
                comp: "已完成",
                status: "100",
                weight: "out",
            },

        ]);
        // eslint-disable-next-line no-unused-vars
        const handleVisitLink = (link) => {
            alert("没有访问的权限！");
        };


        return {
            searchQuery,
            value1,
            value2,
            option1,
            tasks,
            filterTasks,
            formatDate,
            handleVisitLink,
            filterTasksBySearch,
        };
    },
};
</script>

<style>
.codelover {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;
    color: #333;
}

.codelover form {
    margin-bottom: 20px;
}

.codelover .task-item {
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.codelover .task-name {
    font-size: 18px;
    font-weight: bold;
    color: #4a90e2;
}

.codelover .task-date {
    margin-top: 8px;
    color: #666;
}

.codelover .task-comp,
.codelover .task-status,
.codelover .task-weight {
    margin-top: 12px;
    color: #333;
}

.codelover .van-button {
    background-color: #4a90e2;
    color: #fff;
    border-radius: 4px;
    padding: 8px 16px;
}

.codelover .van-tag {
    border-radius: 4px;
    padding: 4px 8px;
}
</style>
